<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<script src="dist/js/jquery/1.11.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>投票</title>
<link rel="stylesheet" href="dist/css/site.min.css">
<script type="text/javascript" src="dist/js/site.min.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$(":submit").click(
						function() {
							var option = [];//定义一个数组
							$.each($(":checked"), function() {
								option.push($(this).val());//把多选框数组的value放入自己定义的里面
							})

							if (option.length == 0) {
								alert("请勾选选项之后提交")
								return false;
							} else {
								$("#optionid").val(option);

							}

						});

				$('.append-new-option').click(
						function() {
							var addvalue = $(this).next().val();
							var voteid = $(this).next().next().val();
							var maxUserOption = $(this).next().next().next().val();

							$.ajax({
								type : "get",
								url : "addOption/" + voteid + "/" + addvalue + "/" + maxUserOption,
								dataType : "json",

								success : function(result) {
									var flag = result.flag;

									if (flag == "fail") {
										alert("添加失败：该投票的选项已经达到最大，不能再添加");
										$("#addOptionv").val("")
									} else if (flag == "fail2") {
										alert("添加失败：投票已有该选项，不能重复添加");
										$("#addOptionv").val("")
									} else {
										alert("添加成功")
										window.location.reload();
										$("#addOptionv").val("")

									}
								}
							});
						});
			});
</script>
<style type="text/css">
tr {
	height: 46px;
}
</style>

</head>
<body>

	<div>
		<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#bs-content-row-navbar-collapse-6">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<h4 style="color: #ECF0F1;">
					<span class="glyphicon glyphicon-globe"> ${channel.title}频道
				</h4>
			</div>
		</div>
		</nav>

		<div class="content-row">

			<div class="bs-example">

				<form:form id="mainForm" action="voteResult/${channelId}" method="get" >
					<input type="hidden" id="channelId" name="channelId" value="${channelId}" />
					<input type="hidden" id="optionid" name="optionid" value="" />
					<table class="table">
						<thead>
							<c:forEach items="${voteList}" var="vote" varStatus="status">
								<input type="hidden" class="maxselected"
									id="${vote.maxSelectedNum }" />
								<tr class="success">
									<td colspan="2">${status.index +1}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${vote.topic}</td>
									<td />
									<td />
								</tr>
								<tr>
									<td />
									<td><c:forEach items="${vote.voteOptionList}" var="option"
											varStatus="status2">
											<c:if test="${option.voteId eq vote.id}">
												<c:choose>
													<c:when test="${vote.maxSelectedNum == 1 }">
														<input type="radio" id="${option.id}" name="title"
															value="${option.id}" />&nbsp;&nbsp;<span>${option.title}</span>
													</c:when>
													<c:when test="${vote.maxSelectedNum > 1 }">
														<input type="checkbox" id="${option.id}" name="title"
															value="${option.id}" />&nbsp;&nbsp;<span>${option.title}</span>
													</c:when>
												</c:choose>
											</c:if>
										</c:forEach></td>
									<td><a href="javascript:void(0)"
										class="append-new-option col-sm-2 control-label"
										style="width: 45px;"> <span
											class="glyphicon glyphicon-plus"></span></a> <input type="text"
										style="width: 30%; height: 23px;" class="form-control "
										id="addOptionv" placeholder="添加新选项"> <input
										type="hidden" id="votee" value="${vote.id}" /> <input
										type="hidden" name="maxUserOption"
										value="${vote.maxUserOption }" /></td>
								</tr>
							</c:forEach>
						</thead>
					</table>
					<button type="submit" class="btn btn-default btn-block"
						style="background-color: #D8D8D8">提交</button>
				</form:form>

			</div>
		</div>
	</div>
</body>
</html>